Offline web applications
Offline web applications are a new feature of HTML5. When we visit a website that
has this feature, the browser downloads all the files that are required for the user to access that specific website. Once the download is complete, the website can be accessed offline. This is particularly useful when there is intermittent internet connectivity. Once we are online, the web server can be updated in case changes have been made.
Let's look at the process of creating an offline web application.
We will now create an HTML page first. Have a look at the following code. Copy it to a notepad and save it as a HTML file so that we can use it later. I have saved this ile as fastread.html. We will modify the <html> tag later, which will be explained in the course of the section.
<!DOCTYPE HTML>
<html>
<head>
<title> Offline web applications </title>
<h1> Offline web applications </h1>
<link rel = "stylesheet" type = "text/css" href = "fastread_style.css" />
</head>
<body>
<p>
Offline web applications are a new feature of HTML5. When we visit a website which has this feature, the browser downloads all the files that are required for the user to access that specific website. Once the download is complete, the website can be accessed offline.
</p>
<div>
This is particularly useful when there is intermittent internet connectivity. Once we are online, the web server can be updated in case changes have been made
</div>
</body>
</html>
Let's now add styling to it by using CSS. Type in the following code and save it as a CSS file with a name of your choice. I have saved this file as fastread_style.css.
We will be using a XAMPP server to demonstrate the procedure. Since it is a XAMPP server, the web server would be Apache. In the Apache folder, we can see a .HTACCESS ile, as shown in the following screenshot:
Open the .HTACCESS file and add the following code:
AddType text/cache-manifest .manifest
We will now create a MANIFEST file, which will assist us in caching the web page for offline use.
Create a new file named MANIFEST. In this example, we will name it as fastread. manifest. Write the following code in the MANIFEST file:
CACHE MANIFEST
# A file called manifest
CACHE:
fastread.html fastread_style.css fstrd.png
NETWORK:
login.php
Anything that comes under CACHE would be cached except for the code mentioned under NETWORK.
We have added a NETWORK attribute to the code. We have mentioned login.php under it. This denotes that the login.php file must not be cached. Anything under NETWORK will not be cached. For example, a login page may have information, such as the username and password. Hence, these kind of pages that should not be available offline must be under the NETWORK declaration.
Now, we need to link the manifest property to the HTML code by modifying the HTML code, as shown in the following code snippet:
<html manifest = "/fastread.manifest">
Since we are working on XAMPP, we will save the fastread.manifest, fastread. html, and fastread_style.css ile in the htdocs folder in XAMPP. Please refer to the following screenshot to see the saved files:
Now, when we run the HTML file (fastread.html) in this case, we will see the following output:
We can see a prompt in the preceding screenshot that tells us whether we want to
save the data for offline use.
This is pretty much it. At the time of writing this section, the latest versions of all the browsers except Internet explorer support this feature.